import {
  Col,
  Row,
  Flex,
  Typography,
  Button,
  Input,
  Cascader,
  Form,
  Table,
  Alert,
  Switch,
  Image,
  message
} from 'antd'
import React from 'react'
import { useEffect } from 'react'
import { useState } from 'react'
import { shopQrcodeList, qrcodeStatus } from '../service/shop'
import { regionData } from '../utils/region'
import qrcode from '../assets/img/qrcode.png'
function ShopQrcode() {
  // 获取省市区选中的值
  const regionChange = (value) => {
    console.log(value)
  }
  const [qrcodeList, setQrcodeList] = useState([])
  const [total, setTotal] = useState(0)
  const [pageNo, setPageNo] = useState(1)
  const [condition, setCondition] = useState({})
  // 保存表格中选中的项
  const [selectedRowKeys, setSelectedRowKeys] = useState([])
  // 表格中是否有选中
  const hasSelected = selectedRowKeys.length > 0
  // 二维码可见
  const [visible, setVisible] = useState(false)
  // 弹出二维码路径
  const [qrcodeUrl, setQrcodeUrl] = useState('')
  const [n, setN] = useState(0)
  useEffect(() => {
    ;(async () => {
      const res = await shopQrcodeList({
        ...condition,
        pageNo: 1,
        pageSize: 10
      })
      console.log(res)
      setQrcodeList(res.data.objects)
      setTotal(res.data.total)
    })()
  }, [n])
  return (
      <>
        <Row className="info">
          <Col span={24}>
            <Flex justify={'space-between'}>
              <Typography.Title level={3}>信息管理</Typography.Title>
            </Flex>
          </Col>
        </Row>
        <Row className="container">
          <Col span={24}>
            {/*<Form
            layout="inline"
            onFinish={async (v) => {
              console.log(v)
              setCondition({
                storeName: v.storeName,
                // storeAddress: v.storeLocation ? v.storeLocation.join() : ''
                area: v.storeLocation && v.storeLocation.length > 0
                    ? parseInt(v.storeLocation[v.storeLocation.length - 1])
                    : undefined
              })
              console.log(condition)
              const res = await shopQrcodeList({
                ...condition,
                pageNo,
                pageSize: 10
              })
              // console.log(res)
              setQrcodeList(res.data.objects)
              setTotal(res.data.total)
              //直接使用新条件查询，不依赖 condition 状态*/}
            <Form
                layout="inline"
                onFinish={async (v) => {
                  console.log(v)
                  // 先定义 newCondition 变量
                  const newCondition = {
                    storeName: v.storeName || undefined,
                    storeAddress: v.storeAddress ? v.storeAddress.join() : ''
                  }

                  // 直接使用新条件查询，不依赖 condition 状态
                  const res = await shopQrcodeList({
                    ...newCondition,
                    pageNo: 1,
                    pageSize: 10
                  })

                  console.log(res)
                  setQrcodeList(res.data.objects)
                  setTotal(res.data.total)

                  // 更新状态用于分页等操作
                  setCondition(newCondition)
                }}
            >
              <Form.Item label="店铺名称：" name="storeName">
                <Input />
              </Form.Item>
              <Form.Item label="区域选择：" name="storeLocation">
                <Cascader
                    options={regionData}
                    onChange={regionChange}
                    placeholder="请选择查询的省/市/区县"
                    // style={{ width: 280 }}
                />
              </Form.Item>
              <Form.Item>
                <Button type="default" htmlType="reset">
                  重置
                </Button>
              </Form.Item>
              <Form.Item>
                <Button type="primary" htmlType="submit">
                  查询
                </Button>
              </Form.Item>
            </Form>
          </Col>
        </Row>
        {/* 表格 */}
        <Row className="container">
          <Col span={24}>
            <Typography.Paragraph style={{ fontSize: 16 }}>
              店铺列表
            </Typography.Paragraph>
            {hasSelected && (
                <Alert
                    message={`已经选择 ${selectedRowKeys.length} 项`}
                    type="info"
                    showIcon
                />
            )}
          </Col>
          <Col span={24}>
            <Table
                pagination={{
                  total,
                  defaultCurrent: 1,
                  onChange: async (page) => {
                    const res = await shopQrcodeList({
                      ...condition,
                      pageNo: page,
                      pageSize: 10
                    })
                    console.log(res)
                    setQrcodeList(res.data.objects)
                    setTotal(res.data.total)
                    setN(n + 1)
                  }
                }}
                rowKey="id"
                rowSelection={{
                  selectedRowKeys,
                  onChange: (newSelectedRowKeys) => {
                    console.log('selectedRowKeys changed: ', newSelectedRowKeys)
                    setSelectedRowKeys(newSelectedRowKeys)
                  }
                }}
                dataSource={qrcodeList}
                columns={[
                  {
                    title: '编号',
                    dataIndex: 'id',
                    key: 'id'
                  },
                  {
                    title: '门店名称',
                    // dataIndex: 'storeName',
                    key: 'storeName',
                    render: (_, record) => record.store?.storeName || ''
                  },
                  {
                    title: '门店地址',
                    // dataIndex: 'companyAddress',
                    key: 'storeLocation',
                    render: (_, record) => record.store?.storeLocation || ''
                  },
                  {
                    title: '店铺名称',
                    // dataIndex: 'businessName',
                    key: 'businessName',
                    render: (_, record) => record.business?.businessName || ''
                  },
                  {
                    title: '链接',
                    dataIndex: 'link',
                    key: 'link'
                  },

                  {
                    title: '启用状态',
                    dataIndex: 'linkStatus',
                    key: 'linkStatus',
                    render: (_, record) => {
                      return (
                          <Switch
                              defaultChecked={!record.linkStatus}
                              onChange={async (value) => {
                                const updateData = {
                                  id: record.id,
                                  linkStatus: value ? 0 : -1
                                }
                                await qrcodeStatus(updateData);
                                if (value) {
                                  message.success('启用成功')
                                } else {
                                  message.warning('停用成功')
                                }
                              }}
                          />
                      )
                    }
                  },
                  {
                    title: '操作',
                    dataIndex: 'op',
                    key: 'op',
                    align: 'center',
                    render: (_, record) => {
                      return (
                          <span className="op">
                      <a
                          onClick={() => {
                            setVisible(true)
                            setQrcodeUrl(record.linkImg)
                          }}
                      >
                        查看二维码
                      </a>
                    </span>
                      )
                    }
                  }
                ]}
            />
          </Col>
        </Row>
        <Image
            width={200}
            style={{
              display: 'none'
            }}
            src={qrcode}
            preview={{
              className: 'centerBox',
              width: 220,
              visible,
              src: 'https://cdn.tmooc.cn/tmooc-web/css/img/erweima.jpg',
              onVisibleChange: (value) => {
                setVisible(value)
              }
            }}
        />
      </>
  )
}


export default ShopQrcode